/**
 * Figure 负责实现数据的可视化
 */

var FG;
if (!FG)
    FG = {};

Highcharts.setOptions({
    lang: {
        months: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
        shortMonths: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
        weekdays: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"]
    }
});

/**
 * FigPane是单个的图表单元.
 * options中需要有
 *      type: 图表的类型;
 *      databundle: 数据包.
 *      parameters: 图像参数, 绘图状态等.
 * @param options
 * @constructor
 */
FG.FigPane = function(options) {
    this.options = _.extend({type: 'datatype', parameters: {}}, options);
    var this_ = this;
    this.type = this.options.type;
    this.databundle = this.options.databundle;
    this.parameters = this.options.parameters;


    this.render = function(target, callback) {
        var $target = $(target);

        this.databundle.getData().done(function(itemlist) {
            // itemlist: [{tag:..., data:...}, {tag:..., data:...}]
            var datatype;
            if (this_.type === 'datatype') {
                for (var i=0; i < itemlist.length; i+=1) {
                    if (!itemlist[i].data.error) {
                        datatype = itemlist[0].data.info.type;
                        break;
                    }
                }
                if (!datatype) {
                    // TODO: 处理错误
                }
                this_.type = FG.getPlotDatatype(datatype);
            }

            FG.simplifyTags(itemlist, {inplace: true});


            if (!_.isUndefined($target.highcharts)) {
                var oldChart = $target.highcharts();
                if (!_.isUndefined(oldChart)) {
                    oldChart.destroy();
                }
            }
            $target.empty();

            var plotFunc = FG.getPlotFunc(this_.type);
            if (!!plotFunc) {
                plotFunc(itemlist, $target);
            }

            if (!!callback) {
                callback(itemlist)
            }
        });

    };

};

// TODO: 需要debug, 现在Pane能画出东西, Combo不能.
/**
 * 由若干FigPane组成的复合图表.
 * options里应包含panes: 一个装载FigPane信息的列表, 其中每一项都是包含如下属性的obj:
 *      pane: FigPane对象,
 *      width, height, left, top: 子FigPane在整个Combo中的位置参数(css).
 *
 * @param options
 * @constructor
 */
FG.FigCombo = function(options) {
    this.options = _.extend({}, options);
    var this_ = this;

    this.figPanes = options.panes;

    this.render = function(target) {
        // TODO: debug this
        var $target = $(target);
        _.each(this.figPanes, function(entry){
            var tmpl = _.template(
                'width: <%= width %>; height: <%= height %>; left: <%= left %>; top: <%= top %>;'
            );
            var $paneDiv = $("div", {"class": 'fig_pane'})
                .attr("style", tmpl(entry));
            $target.append($paneDiv);
            entry.pane.render($paneDiv);
        })
    };

};

/**
 * 由一个FigPane来生成FigCombo
 * @param pane
 * @returns {FG.FigCombo}
 */
FG.getSingleFigCombo = function(pane) {
    var infoBundle = {
        panes: [{pane: pane, width: '100%', height: '100%', top: '0', left: '0'}]
    };
    var figCombo = new FG.FigCombo(infoBundle);
    return figCombo;
};

